<template>

    <div class="home-page">
  
      <!-- 顶部广告横幅（轮播图） -->
  
      <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
  
        <van-swipe-item v-for="(image, index) in bannerImages" :key="index">
  
          <van-image
  
            width="100%"
  
            height="200px"
  
            :src="image"
  
            alt="广告图片"
  
            class="banner-image"
  
          />
  
        </van-swipe-item>
  
      </van-swipe>
  
  
  
      <!-- 功能按钮区域 -->
  
      <van-row class="function-buttons">
  
        <van-grid class="function-grid" column-num="4" gutter="10px">
  
          <van-grid-item
  
            v-for="(item, index) in functionItems"
  
            :key="index"
  
            :icon="item.icon"
  
            :text="item.text"
  
            @click="handleFunctionClick(item.text)"
  
          >
  
            <template #icon>
  
              <van-icon :name="item.icon" size="24px" :color="item.color" :style="{ backgroundColor: item.backgroundColor || 'transparent'}"/>
  
            </template>
  
          </van-grid-item>
  
        </van-grid>
  
      </van-row>
  
  
  
      <!-- 当季热门推荐 -->
  
      <van-row class="hot-recommend">
        <van-col span="24" class="mb-4">
          <h3 class="section-title">当季热门</h3>
        </van-col>
        <div class="hot-items">
          <div
              v-for="(item, index) in hotItems"
              :key="index"
              class="hot-item"
          >
            <van-image
                width="300px"
                height="200px"
                :src="item.image"
                alt="热门图片"
                class="hot-image" 
            />
            <div class="hot-text">{{ item.text }}</div>
          </div>
        </div>
      </van-row>
  
  
  
      <!-- 首页推荐 -->
  
      <van-row class="special-offers">
  
        <van-col span="24" class="mb-4">
  
          <h3 class="section-title">首页推荐</h3>
  
        </van-col>
  
        <van-col
  
          v-for="(item, index) in specialItems"
  
          :key="index"
  
          :span="12"
  
          class="mb-4"
  
        >
  
          <div class="special-item">
  
            <van-image
  
              width="100%"
  
              height="200px"
  
              :src="item?.img ? `http://127.0.0.1:8000${item.img}` : item.image"
  
              alt="特惠图片"
  
              class="special-image"
  
            />
  
            <div class="special-info">
  
              <div class="special-title">{{ item.name }}</div>
  
              <div class="special-rating">
  
                {{ item?.rating || '99%' }}满意&nbsp;{{ item?.reviews || '99+' }}评价
  
              </div>
  
              <div class="special-price">¥{{ item.price }}元起</div>
  
            </div>
  
          </div>
  
        </van-col>
  
      </van-row>
  
  
  
      <!-- 底部导航栏 -->
  
      <dibudaohang />
  
    </div>
  
  </template>
  
  
  
  <script setup>
  import { useRouter } from 'vue-router';
  import { onMounted, ref } from 'vue';
  import http from '../http';
  import dibudaohang from "./dibudaohang.vue";
  const router = useRouter();
  
  
  
  // 轮播图数据
  
  const bannerImages = ref([
  
    'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u86.png',
  
    'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u87.png',
  
    'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u88.png',
  
  ]);
  
  
  
  // 功能按钮数据
  
  const functionItems = ref([
  
    { icon: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u100.svg', text: '酒店/民宿' , color:'#47dcb4', backgroundColor: '#FFCCCC' },
  
    { icon: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u111.svg', text: '火车票' , color:'#47dcb4', backgroundColor: '#FFCCCC'},
  
    { icon: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u116.svg', text: '机票' , color:'#47dcb4', backgroundColor: '#FFCCCC'},
  
    { icon: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u121.svg', text: '景点门票' , color:'#47dcb4', backgroundColor: '#FFCCCC'},
  
    { icon: 'map-marked', text: '周边' ,color:'#47dcb4'},
  
    { icon: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u124.svg', text: '海岛' ,color:'#47dcb4'},
  
    { icon: 'smile-o', color:'#47dcb4',text: '亲子' },
  
    { icon: 'point-gift-o', color:'#47dcb4',text: '活动' },
  
    { icon: 'newspaper-o',color:'#47dcb4', text: '签证' },
  
    { icon: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u197.svg',color:'#47dcb4', text: '打车' },
  
    { icon: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u200.svg',color:'#47dcb4', text: '汽车船票' },
  
    { icon: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u210.svg', color:'#47dcb4', text: '攻略' },
  
  ]);
  
  
  
  // 当季热门推荐数据
  
  const hotItems = ref([
  
    { text: '赏雪滑雪', image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u172.png' },
  
    { text: '温泉养身', image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u175.png' },
  
    { text: '避寒游玩', image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u179.png' },
  
  ]);
  
  
  
  // 精选特惠数据
  
  const specialItems = ref([
  
    {
  
      name: '欢乐谷',
  
      image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E8%87%AA%E7%94%B1%E8%A1%8C%E8%AF%A6%E6%83%85/u1928.png',
  
      rating: '98%',
  
      reviews: '9405',
  
      price: '36',
  
    },
  
    {
  
      name: '欢乐谷',
  
      image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E8%87%AA%E7%94%B1%E8%A1%8C%E8%AF%A6%E6%83%85/u1928.png',
  
      rating: '98%',
  
      reviews: '9405',
  
      price: '36',
  
    },
  
    {
  
      name: '欢乐谷',
  
      image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E8%87%AA%E7%94%B1%E8%A1%8C%E8%AF%A6%E6%83%85/u1928.png',
  
      rating: '98%',
  
      reviews: '9405',
  
      price: '36',
  
    },
  
    {
  
      name: '欢乐谷',
  
      image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E8%87%AA%E7%94%B1%E8%A1%8C%E8%AF%A6%E6%83%85/u1928.png',
  
      rating: '98%',
  
      reviews: '9405',
  
      price: '36',
  
    },
  
  ]);
  
  const getspecialItems = () => {
    let userid = localStorage.getItem('userid')
    http.get(`/att/tj/?userid=${userid}`)
        .then(res => {
            if (res.data?.recommendation) {
                specialItems.value = res.data.recommendation;
            } else {
                console.warn('接口数据异常');
            }
        })
        .catch(err => {
            console.error('请求失败:', err);
        });
  }
  
  // 功能按钮点击事件
  
  const handleFunctionClick = (text) => {
    console.log(`点击了功能按钮：${text}`);
    if (text === '攻略') {
      router.push('/lygl');
    } else {
      router.push('/attlist');
    }
  };


  const payqr = () => {
  axios.get('http://localhost:8000/order/pay/',{params:{
        out_trade_no:route.query.out_trade_no,
      }})
}

  onMounted(() => {
    getspecialItems()
    if (route.query.out_trade_no) {
    payqr()
  }
  })
  
  </script>
  
  
  
  <style scoped>
  
  .home-page {
  
    padding: 10px 10px 50px 10px; /* 添加底边 50px 的内边距 */
  
    background-color: #f5f5f5;
  
  }
  
  
  
  .banner-swipe {
  
    margin-bottom: 15px;
  
    border-radius: 12px;
  
    overflow: hidden;
  
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  
  }
  
  
  
  .banner-image {
  
    border-radius: 12px;
  
  }
  
  
  
  .function-buttons {
  
    background-color: #ffffff;
  
    border-radius: 12px;
  
    padding: 10px;
  
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  
  }
  
  
  
  .function-grid {
  
    border-radius: 8px;
  
    overflow: hidden;
  
  }
  
  
  
  .function-grid-item {
  
    text-align: center;
  
    padding: 10px;
  
    border-radius: 8px;
  
    background-color: #f5f5f5;
  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  }
  
  
  
  .section-title {
  
    font-size: 18px;
  
    color: #333;
  
    margin-bottom: 10px;
  
    font-weight: bold;
  
  }
  
  
  
  .hot-recommend {
  
    background-color: #ffffff;
  
    border-radius: 12px;
  
    padding: 10px;
  
    margin-top: 15px;
  
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  
  }
  
  
  
  .hot-items {
  
    display: flex;
  
    justify-content: flex-start;
  
    flex-wrap: nowrap;
  
    overflow-x: auto;
  
    margin: -10px;
  
    padding: 10px;
  
  }
  
  
  
  .hot-item {
  
    width: 300px;
  
    flex: 0 0 auto;
  
    margin: 10px;
  
    border-radius: 8px;
  
    overflow: hidden;
  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  }
  
  
  
  .hot-image {
  
    border-radius: 8px;
  
  }
  
  
  
  .hot-text {
  
    text-align: center;
  
    padding: 8px;
  
    font-size: 14px;
  
    color: #333;
  
  }
  
  
  
  .special-offers {
  
    background-color: #ffffff;
  
    border-radius: 12px;
  
    padding: 10px;
  
    margin-top: 15px;
  
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  
  }
  
  
  
  .special-item {
  
    border-radius: 8px;
  
    overflow: hidden;
  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  }
  
  
  
  .special-image {
  
    border-radius: 8px;
  
  }
  
  
  
  .special-info {
  
    padding: 8px;
  
  }
  
  
  
  .special-title {
  
    font-size: 16px;
  
    font-weight: bold;
  
    color: #333;
  
  }
  
  
  
  .special-rating {
  
    font-size: 14px;
  
    color: #666;
  
    margin-top: 4px;
  
  }
  
  
  
  .special-price {
  
    font-size: 18px;
  
    color: #e60023;
  
    margin-top: 4px;
  
  }
  
  </style>